<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">{{pageTitle}}</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../static/close.png"></image>
				</view>
			</view>

			<view class="top-line"></view>

			<scroll-view class="center-back" scroll-y="true">
				<uni-forms ref="baseForm" labelWidth="90" :modelValue="baseFormData">
					<uni-forms-item label="客户名称：" required>
						<view class="item-back">
							<uni-easyinput v-model="baseFormData.name" placeholder="请填写" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="客户简称：">
						<view class="item-back">
							<uni-easyinput v-model="baseFormData.shortName" placeholder="请填写" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="客户类型：" required>
						<view class="item-back4">
							<selectxy :zindex=399 ref="selectxy" :value="multipleArr" placeholder="请选择"
								:options="rangeList" @change="multipleChange">
							</selectxy>
						</view>
					</uni-forms-item>
					<uni-forms-item label="联系地址" required>
						<uni-easyinput type="textarea" v-model="baseFormData.address" placeholder="请填写" />
					</uni-forms-item>
					<uni-forms-item label="绑定用户：" labelWidth="100" labelAlign="right">
						<view class="law-item-back">
							<input @input="onKeyInput" class="selectLaw" @focus="startEditAction"
								v-model="baseFormData.code" placeholder="请输入用户手机号"></input>
							<view v-if="userShowMask" class="selectLaw-list">
								<scroll-view class="pop-content-back" scroll-y="true">
									<view class="pop-content-list" v-for="(item,index) in userArr"
										@click="clickPopIremAction(item)">
										<image class="pop-content-img" :src="item.account.avatarPic"></image>
										<view class="pop-content-name">{{item.account.realName}}</view>
										<view class="pop-content-phone">{{item.account.mobile}}</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="mask-view" v-if="userShowMask" @tap="tapMask"></view>
						<view class="customer-item-back">
							<view class="customer-item" v-for="(item,index) in userSelectedArr">
								<view class="customer-back">
									<image class="customer-img" :src="item.account.avatarPic"></image>
									<view class="customer-name">{{item.account.realName}}</view>
									<view class="customer-phone">{{item.account.mobile}}</view>
									<image class="customer-close" @click="clickDelAction(index)"
										src="../../../static/phone/guanbi1.png"></image>
								</view>
								<view class="customer-author">{{item.authored?'已授权':'未授权'}}
									<view class="customer-author2">|</view><text class="customer-author2"
										@click="authorAction(index)">{{item.authored?'取消授权':'授权'}}</text>
								</view>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="常用律师：" labelWidth="100" labelAlign="right">
						<view class="law-item-back">
							<input @input="onLawyerKeyInput" class="selectLaw" @focus="startLawyerEditAction"
								v-model="baseFormData.code1" placeholder="输入律师姓名/手机号/工作组"></input>
							<view v-if="lawyerShowMask" class="selectLaw-list">
								<scroll-view class="pop-content-back" scroll-y="true">
									<view class="pop-content-list" v-for="(item,index) in lawyerArr"
										@click="clickLawyerPopIremAction(item)">
										<image class="pop-content-img" :src="item.account.avatarPic"></image>
										<view class="pop-content-name">{{item.account.realName}}</view>
										<view class="pop-content-phone">{{item.account.mobile}}</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="mask-view" v-if="lawyerShowMask" @tap="tapLawyerMask"></view>
						<view class="customer-item-back">
							<view class="customer-item" v-for="(item,index) in lawyerSelectedArr">
								<view class="customer-back">
									<image class="customer-img" :src="item.account.avatarPic"></image>
									<view class="customer-name">{{item.account.realName}}</view>
									<view class="customer-phone">{{item.account.mobile}}</view>
									<image class="customer-close" @click="clickLawyerDelAction(index)"
										src="../../../static/phone/guanbi1.png"></image>
								</view>
							</view>
						</view>
					</uni-forms-item>

					<uni-forms-item label="联系信息">
						<view>
							<view @click="clickShowinfoAction" class="info-show">{{showInfo?'收起':'展开'}}
								<image class="info-show-img" src="../../../static/phone/zhankai.png"></image>
							</view>
							<view v-if="showInfo" class="info-list-back">
								<uni-forms ref="baseForm" labelWidth="100" labelAlign="right">
									<uni-forms-item label="电话:">
										<uni-easyinput v-model="baseFormData.phoneNumber" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="传真:">
										<uni-easyinput v-model="baseFormData.faxNumber" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="邮箱:">
										<uni-easyinput v-model="baseFormData.email" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="网站:">
										<uni-easyinput v-model="baseFormData.website" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="联系人">
										<uni-easyinput v-model="baseFormData.contactName" placeholder="请填写" />
									</uni-forms-item>
								</uni-forms>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="住所地：">
						<view class="item-back">
							<uni-easyinput v-model="baseFormData.domicile" placeholder="请填写" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="开票信息">
						<view>
							<view @click="clickShowTickAction" class="info-show">{{showTick?'收起':'展开'}}
								<image class="info-show-img" src="../../../static/phone/zhankai.png"></image>
							</view>
							<view v-if="showTick" class="info-list-back">
								<uni-forms ref="baseForm" labelWidth="100" labelAlign="right">
									<uni-forms-item label="单位名称：">
										<uni-easyinput v-model="baseFormData.companyName" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="纳税人识别号：">
										<uni-easyinput v-model="baseFormData.taxNo" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="开户银行：">
										<uni-easyinput v-model="baseFormData.bankName" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="银行账号：">
										<uni-easyinput v-model="baseFormData.bankNo" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="注册地址：">
										<uni-easyinput v-model="baseFormData.regAddress" placeholder="请填写" />
									</uni-forms-item>
									<uni-forms-item label="注册电话：">
										<uni-easyinput v-model="baseFormData.regPhone" placeholder="请填写" />
									</uni-forms-item>
								</uni-forms>
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="权限类别：">
						<view class="item-back4">
							<selectxy :zindex=299 ref="statusSelectxy" :value="statusMultipleArr" placeholder="请选择"
								:options="statusRangeList" @change="statusMultipleChange">
							</selectxy>
						</view>
					</uni-forms-item>
					<view class="top-line top-line1"></view>
					<view class="bottom-des">以下信息客户不可见</view>
					<uni-forms-item label="组别标签：">
						<view class="item-back4">
							<selectxy :zindex=199 ref="hopeSelectxy" :value="hopeMultipleArr" placeholder="请选择"
								:options="hopeRangeList" @change="hopeMultipleChange">
							</selectxy>
						</view>
					</uni-forms-item>
					<uni-forms-item label="客户备注：">
						<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="请填写" />
					</uni-forms-item>
				</uni-forms>
			</scroll-view>

			<view class="bottom-back">
				<view class="bottom-btn bottom-btn-cancel" @click="closeBtnAction">取消</view>
				<view class="bottom-btn" @click="submitAction">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dataselect from "@/components/data-select/dataselect.vue"
	import selectxy from "@/components/select-cy/select-cy.vue"
	let app = ''

	export default {
		components: {
			dataselect,
			selectxy
		},
		props: {

			classArr: {
				type: Array,
				default: {},
			},
			selectItem: {
				type: Object,
				default: {}
			},
			editType: {
				type: String,
				default: 'add',
			},
			rangeList: {
				type: Array,
				default: [],
			},
			statusRangeList: {
				type: Array,
				default: [],
			},
			hopeRangeList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				role: '', //当前登录角色
				roleUrl: '',
				pageTitle: "新增客户信息",
				baseFormData: {
					name: '',
					shortName: '',
					categoryDict: '',
					address: '',
					phoneNumber: '',
					faxNumber: '',
					email: '',
					contactName: '',
					website: '',
					companyName: '',
					taxNo: '',
					bankName: '',
					bankNo: '',
					regAddress: '',
					regPhone: '',
					remark: ''
				},

				showInfo: false, //是否展开联系信息
				showTick: false, //是否展开发票信息

				multipleArr: [], //客户类型
				selectArr: [],
				statusMultipleArr: [],
				statusSelectArr: [],
				hopeMultipleArr: [], //组别标签
				hopeSelectArr: [],

				userList: [], //绑定用户
				userArr: [], //绑定用户去掉已选
				userSelectedArr: [], //绑定用户已选择
				userShowMask: false, //绑定用户

				lawyerList: [], //常用律师
				lawyerArr: [], //常用律师去掉已选
				lawyerSelectedArr: [], //常用律师已选择
				lawyerShowMask: false, //常用律师
			}
		},
		mounted() {
			var _this = this;
			app = getApp()
			_this.role = app.globalData.role
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			if (this.editType == 'edit') {
				this.pageTitle = '编辑客户信息';
				// this.baseFormData.id = this.itemID;
				this.editAction()

			} else {
				this.requestData();
				this.requestLawyerData();
			}
		},
		methods: {
			async editAction() {
				await this.requestData();
				await this.requestLawyerData();
				this.requestInfoData();
			},

			//信息网络请求
			async requestInfoData() {
				let _this = this;
				console.log(this.selectItem)
				const res = await this.$myRequest({
					url: `/${_this.roleUrl}/customer/` + this.selectItem.id,
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.baseFormData = res.data.data;

					//客户类型
					_this.multipleArr = _this.baseFormData.categoryDict.split(',');
					for (var i = 0; i < _this.multipleArr.length; i++) {
						var value = _this.multipleArr[i];
						for (var j = 0; j < _this.rangeList.length; j++) {
							var item = _this.rangeList[j];
							if (item.value == value) {
								_this.selectArr.push(item)
							}
						}
					}
					_this.$refs.selectxy.likeSuccess(_this.multipleArr, _this.rangeList);

					//权限类别
					_this.statusMultipleArr = _this.baseFormData.permDict.split(',');
					for (var i = 0; i < _this.statusMultipleArr.length; i++) {
						var value = _this.statusMultipleArr[i];
						for (var j = 0; j < _this.statusRangeList.length; j++) {
							var item = _this.statusRangeList[j];
							if (item.value == value) {
								_this.statusSelectArr.push(item)
							}
						}
					}
					_this.$refs.statusSelectxy.likeSuccess(_this.statusMultipleArr, _this.statusRangeList);

					//组别标签
					_this.hopeMultipleArr = _this.baseFormData.groupDict.split(',');
					for (var i = 0; i < _this.hopeMultipleArr.length; i++) {
						var value = _this.hopeMultipleArr[i];
						for (var j = 0; j < _this.hopeRangeList.length; j++) {
							var item = _this.hopeRangeList[j];
							if (item.value == value) {
								_this.hopeSelectArr.push(item)
							}
						}
					}
					_this.$refs.hopeSelectxy.likeSuccess(_this.hopeMultipleArr, _this.hopeRangeList);

					//绑定用户
					var userIDs = _this.baseFormData.users;
					for (var i = 0; i < _this.userList.length; i++) {
						var value = _this.userList[i];
						for (var j = 0; j < userIDs.length; j++) {
							var item = userIDs[j];
							if (item.accId == value.accId) {
								if (item.isAuthorize) {
									value.authored = false;
									if (item.isAuthorize.code == '1') {
										value.authored = true;
									}
								}
								_this.userSelectedArr.push(value)
							}
						}
					}


					//常用律师
					var lawyerIDs = _this.baseFormData.staff;
					for (var i = 0; i < _this.lawyerList.length; i++) {
						var value = _this.lawyerList[i];
						for (var j = 0; j < lawyerIDs.length; j++) {
							var item = lawyerIDs[j];
							if (item.accId == value.accId) {
								_this.lawyerSelectedArr.push(value)
							}
						}
					}

					// 		if (res.data.data.cycleUnit) {
					// 			_this.$set(_this.baseFormData, 'cycleUnit', res.data.data.cycleUnit.code)
					// 		}
					// 		_this.$set(_this.baseFormData, 'price', (res.data.data.price / 100).toFixed(2))
					// 		console.log('数据库' + _this.baseFormData.cycleUnit)
				}
			},
			//保存
			async submitAction() {
				let _this = this

				if (!this.baseFormData.name) {
					uni.showToast({
						title: '请填写客户名称',
						icon: 'none'
					})
					return;
				}
				if (!_this.selectArr.length) {
					uni.showToast({
						title: '请选择客户类型',
						icon: 'none'
					})
					return;
				}
				if (!this.baseFormData.address) {
					uni.showToast({
						title: '请填写联系地址',
						icon: 'none'
					})
					return;
				}
				//客户类型
				var dicStr = '';
				for (var i = 0; i < _this.selectArr.length; i++) {

					if (i == 0) {
						dicStr = _this.selectArr[i].value
					} else {
						dicStr += "," + _this.selectArr[i].value
					}
				}

				//权限类别
				var authorStr = '';
				for (var i = 0; i < _this.statusSelectArr.length; i++) {

					if (i == 0) {
						authorStr = _this.statusSelectArr[i].value
					} else {
						authorStr += "," + _this.statusSelectArr[i].value
					}
				}

				//组别标签
				var teamStr = '';
				for (var i = 0; i < _this.hopeSelectArr.length; i++) {

					if (i == 0) {
						teamStr = _this.hopeSelectArr[i].value
					} else {
						teamStr += "," + _this.hopeSelectArr[i].value
					}
				}

				var parms = {
					'id': this.baseFormData.id,
					'name': this.baseFormData.name,
					'shortName': this.baseFormData.shortName,
					'categoryDict': dicStr, //客户类型
					'address': this.baseFormData.address,
					'phoneNumber': this.baseFormData.phoneNumber,
					'faxNumber': this.baseFormData.faxNumber,
					'email': this.baseFormData.email,
					'website': this.baseFormData.website,
					'contactName': this.baseFormData.contactName,
					'domicile': this.baseFormData.domicile,
					'companyName': this.baseFormData.companyName,
					'taxNo': this.baseFormData.taxNo,
					'bankName': this.baseFormData.bankName,
					'bankNo': this.baseFormData.bankNo,
					'regAddress': this.baseFormData.regAddress,
					'regPhone': this.baseFormData.regPhone,
					'permDict': authorStr, //权限类别
					'groupDict': teamStr, //组别标签
					'remark': this.baseFormData.remark,
				}
				//绑定用户
				var userArr = [];
				var authordeArr = [];
				for (var i = 0; i < _this.userSelectedArr.length; i++) {
					var item = _this.userSelectedArr[i];
					if (item.authored) {
						authordeArr.push(item.id);
					}
					userArr.push(item.id);
				}
				if (authordeArr) {
					_this.$set(parms, 'authorizeUserIds', authordeArr);
				}
				if (userArr) {
					_this.$set(parms, 'userIds', userArr);
				}

				//常用律师
				var lawyerArr = [];
				for (var i = 0; i < _this.lawyerSelectedArr.length; i++) {
					var item = _this.lawyerSelectedArr[i];
					lawyerArr.push(item.id);
				}
				if (lawyerArr) {
					_this.$set(parms, 'staffIds', lawyerArr);
				}
				console.log(parms)
				var url = `/${_this.roleUrl}/customer`;
				const res = await this.$myRequest({
					url: url,
					method: _this.editType == 'edit' ? 'PUT' : 'POST',
					data: parms
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					uni.showToast({
						title: _this.editType == 'edit' ? '编辑成功' : '添加成功'
					})
					_this.$emit("successBack");
					_this.closeBtnAction()
				}
			},
			//绑定用户：网络请求
			async requestData() {
				let _this = this
				var url = `/${_this.roleUrl}/commUser/selector/0`;
				let parmas = {};
				if (_this.baseFormData.code) {
					this.$set(parmas, 'keyword', _this.baseFormData.code)
				}
				const res = await this.$myRequest({
					url: url,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.userList = res.data.data;
					_this.refreshDataAction();
				}
			},
			//绑定用户：开始输入
			startEditAction(e) {
				console.log(e)
				this.userShowMask = true
			},
			//绑定用户：输入
			onKeyInput(event) {
				console.log(event.target.value)
				this.requestData()
			},
			//绑定用户：隐藏
			tapMask() {
				this.userShowMask = false
			},
			//绑定用户：选择
			clickPopIremAction(item) {
				this.userShowMask = false;
				item.authored = false;
				this.userSelectedArr.push(item);
				this.refreshDataAction();
			},
			//授权	
			authorAction(index) {
				var item = this.userSelectedArr[index];
				item.authored = !item.authored;
				this.userSelectedArr.splice(index, 1, item);
			},

			//绑定用户：刷新列表
			refreshDataAction() {
				this.userArr = [];
				for (var i = 0; i < this.userList.length; i++) {
					var value = this.userList[i];
					var hasSelect = false;
					for (var j = 0; j < this.userSelectedArr.length; j++) {
						var tem = this.userSelectedArr[j];
						if (value.account.id == tem.account.id) {
							hasSelect = true;
						}
					}
					if (!hasSelect) {
						this.userArr.push(value);
					}
				}
			},
			//绑定用户：删除已选用户
			clickDelAction(index) {
				this.userSelectedArr.splice(index, 1);
				this.refreshDataAction();
			},

			//常用律师：网络请求
			async requestLawyerData() {
				let _this = this
				var url = `/${_this.roleUrl}/lawyer/selector`;
				let parmas = {};
				if (_this.baseFormData.code1) {
					this.$set(parmas, 'keyword', _this.baseFormData.code1)
				}
				const res = await this.$myRequest({
					url: url,
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.lawyerList = res.data.data;
					_this.refreshLawyerDataAction();
				}
			},
			//常用律师：开始输入
			startLawyerEditAction(e) {
				console.log(e)
				this.lawyerShowMask = true
			},
			//常用律师：输入
			onLawyerKeyInput(event) {
				console.log(event.target.value)
				this.requestLawyerData()
			},
			//常用律师：隐藏
			tapLawyerMask() {
				this.lawyerShowMask = false
			},
			//常用律师：选择
			clickLawyerPopIremAction(item) {
				this.lawyerShowMask = false;
				this.lawyerSelectedArr.push(item);
				this.refreshLawyerDataAction();
			},

			//常用律师：刷新列表
			refreshLawyerDataAction() {
				this.lawyerArr = [];
				for (var i = 0; i < this.lawyerList.length; i++) {
					var value = this.lawyerList[i];
					var hasSelect = false;
					for (var j = 0; j < this.lawyerSelectedArr.length; j++) {
						var tem = this.lawyerSelectedArr[j];
						if (value.account.id == tem.account.id) {
							hasSelect = true;
						}
					}
					if (!hasSelect) {
						this.lawyerArr.push(value);
					}
				}
			},
			//常用律师：删除已选用户
			clickLawyerDelAction(index) {
				this.lawyerSelectedArr.splice(index, 1);
				this.refreshLawyerDataAction();
			},


			//客户类型
			multipleChange(item, value) {
				this.selectArr = item;
				this.multipleArr = value;
				// 	this.baseFormData.domainDict = value;

			},
			//权限类别		
			statusMultipleChange(item, value) {
				this.statusSelectArr = item;
				this.statusMultipleArr = value;
			},
			//组别标签
			hopeMultipleChange(item, value) {
				this.hopeSelectArr = item;
				this.hopeMultipleArr = value;
			},
			clickShowinfoAction() {
				this.showInfo = !this.showInfo
			},
			clickShowTickAction() {
				this.showTick = !this.showTick
			},
			typeChange(e) {
				console.log("e:", e);
			},

			teamTagChange(e) {
				console.log("e:", e);
			},


			closeBtnAction() {
				this.$emit('addCustomerClose')
			},
			moveHandle() {
				return true
			},

		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1119;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 20;
		background-color: rgba(0, 0, 0, 0.3);
	}


	.white-view-back {
		width: 552px;
		height: 491px;
		padding: 24px;
		max-height: 491px;
		background-color: white;
		margin-top: -70px;
		border-radius: 4px;
		z-index: 21;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;
	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.top-line1 {
		margin-top: 0px;
	}

	.bottom-back {
		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		height: 60px;
		right: 24px;
	}

	.bottom-btn {
		cursor: pointer;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-btn-cancel {
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		color: #333333;
		margin-right: 10px;
	}

	/* 
中间高度=总高 491- 20-21 - 20-60 + 14
 */
	.center-back {
		width: 100%;
		max-height: 384px;
		height: 384px;

	}


	.customer-item {
		display: flex;
		margin-top: 8px;
		align-items: center;
	}

	.customer-back {
		min-width: 168px;
		height: 44px;
		background: #E8F7FB;
		border-radius: 4px;
		display: flex;
		align-items: center;
	}

	.customer-img {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin-left: 8px;
	}

	.customer-name {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 2px;
	}

	.customer-phone {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 4px;
	}

	.customer-close {
		width: 16px;
		height: 16px;
		margin-right: 2px;
		margin-left: auto;
	}

	.customer-author {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		margin-left: 16px;
		display: flex;
	}

	.customer-author2 {
		color: #2DA9C5;
		margin-left: 16px;
	}

	.info-show {
		font-size: 12px;
		font-weight: 400;
		color: #2DA9C5;
		display: flex;
		height: 40px;
		width: 60px;
		align-items: center;
	}

	.info-show-img {
		width: 12px;
		height: 12px;
		margin-left: 4px;

	}

	.info-list-back {
		margin-left: -70px;
		width: 300px;
	}

	.item-back {
		width: 300px;
		/* 		display: flex;
 */
		align-items: stretch;
	}

	.item-back4 {
		width: 250px;
	}

	.bottom-des {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		margin-bottom: 10px;
	}

	.law-item-back {
		background-color: white;
		width: 300px;
	}

	.selectLaw {
		font-size: 14px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;

		flex-direction: row;
		align-items: center;
		z-index: 100;
		background-color: white;
	}

	.selectLaw-list {
		margin-top: 2px;
		position: absolute;
		width: 350px;
		height: 180px;
		z-index: 100010;
		background-color: white;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2000);
		border-radius: 2px;
	}

	.pop-content-back {
		margin-left: 20px;
		width: 328px;
		height: 100%;
	}

	.pop-content-list {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.pop-content-img {
		width: 20px;
		min-width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.pop-content-name {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 6px;
	}

	.pop-content-phone {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 10px;
	}

	.mask-view {
		position: absolute;
		width: 100vw;
		height: 100vh;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.0);
		top: -200px;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
